<template>
	<div class="wrapper">
		<header>在线支付</header>
		<h3>订单信息:</h3>
		<div class="order-info">
			<p>
				{{orders.business.businessName}}
				<i class="fa fa-caret-down" id="showBtn" @click="detailShow()"></i>
			</p>
			<p>&#165; {{orders.orderTotal}}</p>
		</div>

		<!-- 订单明细的div -->
		<ul class="order-detailet" id="detailerBox" v-show="isShow">
			<li v-for="item in orders.list">
				<p>{{item.food.foodName}}×{{item.quantity}}</p>
				<p>&#165;{{item.quantity*item.food.foodPrice}}</p>
			</li>

			<li>
				<p>配送费:</p>
				<p>&#165;{{orders.business.deliveryPrice}}</p>
			</li>
		</ul>

		<!-- 支付方式 -->

		<ul class="payment-type">
			<li>
				<img src="../assets/alipay.png">
				<i class="fa fa-check-circle"></i>
			</li>
			<li>
				<img src="../assets/wechat.png">
			</li>
		</ul>

		<!-- 支付按钮 -->
		<div class="payment-button">
			<button type="button">确认支付</button>
		</div>


		<!-- 底部菜单 -->
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue'
	export default{
		name:'Payment',
		data(){
			return{
				orderId:this.$route.query.orderId,
				orders:{
					business:{}
				},
				isShow:false
			}
		},
		components:{
			Footer
		},
		created() {
			
			this.$axios.post('OrdersController/getOrdersById',
			this.$qs.stringify({orderId:this.orderId}))
			.then(resp=>{
				this.orders= resp.data;
				console.log(resp.data);
			})
			.catch(err=>{
				
			})
		},
		methods:{
			detailShow(){
				this.isShow = !this.isShow;
			}
		},
		mounted() {//当新订单生成之后,绝对不允许用户回退,否则就会造成购物车页面加载错误
			//监听浏览器回退按钮 ,一旦点击了回退按钮,就回退到首页去 
			//alert(document.URL);//http://localhost:8081/payment?orderId=11
			//1.具体步骤1 ,先将当前路由(url)添加到histroy对象里
			history.pushState(null,null,document.URL);
			//2.利用一个事件,监听history对象的变化
			window.onpopstate =()=>{ //因为要用到this所以用箭头函数
				this.$router.push({path:'/index'})
			}
		},
		destroyed() {
			//因为是单页应用 ,所以一旦离开当前组件页面,就把这个监听事件去掉
			window.onpopstate = null;
		}
	}
</script>

<style scoped>
	/* wrapper  总容器*/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		display: flex;
		justify-content: center;
		align-items: center;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
	}

	.wrapper h3 {
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 0 4vw;

		font-size: 4vw;
		color: #999;
		font-weight: 300;

	}


	.wrapper .order-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0 4vw;

		font-size: 4vw;
		color: #666;
	}

	.wrapper .order-info p:last-child {
		color: orangered;
	}

	/* 订单详情 */
	.wrapper .order-detailet {
		width: 100%;
	}

	.wrapper .order-detailet li {
		width: 100%;
		box-sizing: border-box;
		padding: 0 4vw;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order-detailet li p {
		font-size: 3vw;
		color: #666;
	}

	/* 支付方式 */
	.wrapper .payment-type {
		width: 100%;
		margin-top: 2vw;
	}

	.wrapper .payment-type li {
		width: 100%;
		box-sizing: border-box;
		padding: 0 4vw;

		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 2vw;
	}

	.wrapper .payment-type li img {
		width: 33vw;
		height: 9vw;
	}

	.wrapper .payment-type li .fa-check-circle {
		font-size: 5vw;
		color: #38CA73;
	}

	/* 支付按钮 */
	.wrapper .payment-button {
		margin-top: 8vw;
		width: 100%;
		box-sizing: border-box;
		padding: 0 4vw;
	}

	.wrapper .payment-button button {
		width: 100%;
		height: 10vw;
		background-color: #38CA73;
		border-radius: 1vw;

		font-size: 4vw;
		color: #fff;

		/* 点击之后,去掉外轮廓线 */
		outline: none;
		border: none;
	}
</style>
